import { appStore } from '@renderer/store/modules/app'
import { defineComponent, onUnmounted, reactive, ref } from 'vue'
import { message } from 'ant-design-vue'
const { ipcRenderer } = require('electron')

export default defineComponent({
  name: 'SettingModal',
  setup () {
    const modalVisible = ref(false)
    const { gridSize, newBlockNum, saveSettings } = appStore
    const state = reactive({
      model: {
        gridSize,
        newBlockNum
      }
    })
    const openDialog = () => {
      const { gridSize, newBlockNum, isGameStart } = appStore
      if (isGameStart) {
        message.error('游戏中不能进行设置,请先结束当前游戏')
        return
      }
      modalVisible.value = true
      state.model = {
        gridSize,
        newBlockNum
      }
    }
    const save = () => {
      saveSettings(state.model)
      modalVisible.value = false
    }
    ipcRenderer.on('settings', openDialog)

    onUnmounted(() => {
      ipcRenderer.removeAllListeners('settings')
    })
    /* render 函数 */
    return () => {
      const { model } = state
      return (
        <a-modal title="游戏设置" v-model={[modalVisible.value, 'visible']} onOk={ save }>
          <a-form model={ model } labelCol={{ span: 8 }}>
            <a-form-item label="游戏格数">
              <a-input-number v-model={[model.gridSize, 'value']} precision={ 0 } min={ 3 } max={ 5 } />
            </a-form-item>
            <a-form-item label="单次新增格数">
              <a-input-number v-model={[model.newBlockNum, 'value']} precision={ 0 } min={ 1 } max={ 3 } />
            </a-form-item>
          </a-form>
        </a-modal>
      )
    }
  }
})
